<template>
    <div class="content_box" ref="content_box">
        <div class="collageContent" ref="collageContent">
            <div v-if="type== 1" class="product_list" v-for="(shop,index) in homeCollage"
                 @click="$router.push({path: '/home/product_details', query: {type: shop.type, templateId: shop.templateId}})"
            >
                <img v-lazy="{src:shop.productInfo.mainImage}" alt="">
                <h3>{{shop.productInfo.name}}</h3>
                <div class="price_num">
                    <p class="price"><span>￥</span>{{shop.minSellPrice || '0.00'}}</p>
                    <p class="num">{{shop.sales || 0}}人拼单</p>
                </div>
            </div>
            <div v-if="type == 3" class="product_list" v-for="(shop,index) in homeCollage"
                 @click="$router.push({path: '/home/product_details', query: {type: shop.type, templateId: shop.templateId}})">
                <img v-lazy="{src:shop.productInfo.mainImage}" alt="">
                <h3>{{shop.productInfo.name}}</h3>
                <div class="price_num">
                    <p class="price"><span>￥</span>{{shop.minSellPrice || '0.00'}}</p>
                    <p class="num">销量{{shop.sales || 0}}件</p>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    export default {
      name:'collageBox',
      props: ["homeCollage","type"],
      created () {
        this.$nextTick(()=>{

          this.InitTabScroll();

        });//必须等dom元素挂载完下一帧才能渠道$refs

      },
      updated(){
        this.InitTabScroll();
      },
      methods: {
        InitTabScroll(){
          let width= this.homeCollage.length * (2.1 + 0.1) + 0.5;
          this.$refs.collageContent.style.width=width+'rem';
          this.$nextTick(()=>{
            if (!this.scroll) {
              this.scroll=new BScroll(this.$refs.content_box, {
                startX:0,
                click:true,
                scrollX:true,
                scrollY:false,
                eventPassthrough:'vertical',
              })
            }else{
              this.scroll.refresh();
            }
          });
        }
      }
    }
</script>
<style lang="less" scoped>
    .collageContent {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0.30rem;
    }
    .product_list {
        background: #fff;
        /*margin: 0 0.08rem;*/
        margin-right: .1rem;
        width:2.1rem;
        /*高限死*/
        height: 3.6rem;
        position: relative;
        img {
            width: 2.1rem;
            height: 2.1rem;
            display: block;
            margin: 0 auto;
        }

        h3 {
            margin: 0.1rem 0 0.2rem;
            font-size: 0.24rem;
            line-height: 0.36rem;
            font-weight: normal;
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #353535;
        }

        .price_num {
            width: 100%;
            height: 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            .price {
                color: #FF0000;
                font-size: 0.22rem;

                span {
                    font-size: 0.2rem;
                }
            }
            .num {
                text-align: rig ht;
                color: #9b9b9b;
                font-size: 0.20rem;
            }

        }
    }
</style>